<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="../CSS/CSS.css">
   <!-- <script>
        //屏幕对象
        var scr = window.screen;
        //也可以直接简写
        screen.availHeight;//有效的高度
        screen.availWidth;
        screen.height;//实际高度
        screen.width;
        screen.colorDepth;//颜色深度

        //历史对象
        var his = window.history;
        his.forward();//向后一页
        his.back();//向前一页
        his.go(0);//去往哪一页 如 -2 前两页 3 向后三页

        //资源管理器对象
        var loc = window.location;
        loc.href;//当前地址
        loc.hostname;//主机名 | 域名
        loc.pathname;//地址路径
        loc.port;//端口
        loc.protocol;//协议

        //cookie的操作
        //他是一个文件，是存储在客户端机器的文件
        //用于存储信息 如：是否记住该网页登陆的密码
        //每一个浏览器都支持这样的功能

        window对象及方法
        alert	prompt confirm open close setTimeout setInterval
        document对象及方法

        history对象及方法
        foward back go
        date日期对象及方法
        getFullyear get[set]Month date day hour minute second millsecond
        location对象及方法
        href hostname pathname port protocol
        screen对象及方法
        availWidth availHeight width height colorDepth
        math对象及方法
        max min ramdom abs floor ceil
        string对象及方法
        substr indexOf concat split charAt charCodeAt startsWith endsWith
        array对象及方法
        length join push pop concat sort shift unshift reverse slice splice reverse
        cookie对象及方法
    </script>-->
    <script>
        //定义settimeout的方法
        function timedMsg()
        {
            var t=setTimeout("alert('5 seconds!')",100)
        }

        window.onload =function () { /*//时间对象脚本
            myTime();
            window.setInterval(myTime, 100);
            //
            //window对象脚本
            document.getElementById('btn1').onclick = function () {
                var a = prompt();//弹出一个输入框
                confirm('是否要保存？');//弹出一个对话框，确定或取消
                alert(a);//弹出一个提示框，显示输入框内输入的内容
                timedMsg();
                window.open("http://www.baidu.com");
                window.close("http://www.baidu.com");


            };
            //document对象脚本
            document.getElementById('btn8').onclick = function () {
                var _pa = document.createElement('div');
                _pa.style.backgroundColor = 'red';
                _pa.style.width = '200px';
                _pa.style.height = '200px';

                document.getElementById('p2').appendChild(_pa);
                var txt  = document.createTextNode("hello");
                _pa.appendChild(txt);
                _pa.innerHTML = '<input  type  = "text"/>'

            };


            //location对象及方法
            document.getElementById('btn2').onclick = function () {
                var loc = window.location;
                alert(loc.href);//当前的地址
                alert(loc.hostname);//主机名|域名
                alert(loc.pathname);//地址路径
                alert(loc.port);//端口
                alert(loc.protocol);//协议*!/
         };
         //screen对象及方法
         document.getElementById('btn3').onclick = function () {
         alert(screen.availWidth);//有效的宽度
         alert(screen.availHeight);//有效的高度
         alert(screen.width);//实际的宽度
         alert(screen.height);//实际的高度
         alert(screen.colorDepth);//颜色深度
         };

         };

         //length join push pop concat sort shift unshift reverse slice splice reverse
         //*/
            //alert 弹出消息框
            document.getElementById('_alert').onclick = function () {
                alert('hello!')
            };
            //prompt 弹出输入框
            document.getElementById('_prompt').onclick = function () {
                prompt('请输入您的姓名！')
            };
            //confirm 弹出确认框
            document.getElementById('_confirm').onclick = function () {
                confirm('是这样吗?')
            };
            //open 打开另一个网页
            document.getElementById('_open').onclick = function () {
                open('kong.html')
            };

            //时间对象的调用方法与定时器
            myTime();
            window.setInterval(myTime, 100);

            //屏幕对象
            document.getElementById('btn3').onclick = function () {
                alert(screen.availWidth);//有效的宽度
                alert(screen.availHeight);//有效的高度
                alert(screen.width);//实际的宽度
                alert(screen.height);//实际的高度
                alert(screen.colorDepth); //颜色深度
            };
            //math 对象及方法
            document.getElementById('btn4').onclick = function () {
                alert(Math.min(5, 7));//返回 x 和 y 中的最低值。
                alert(Math.max(5, 7));//返回 x 和 y 中的最高值。
                alert(Math.random());//返回 0 ~ 1 之间的随机数。
                alert(Math.abs(5));
                //返回数的绝对值。
                alert(
                    Math.floor(4.22));//对数进行下舍入。
                alert(Math.ceil(4.22));
                //	对数进行上舍入

            };
            //string 对象及方法
            document.getElementById('btn5').onclick = function () {
                //substr indexOf concat split charAt charCodeAt startsWith endsWith
                var aa = 'hkjk65lkj';
                alert(aa.substr(4,3));//截取长度  ( 起始位置，长度)
                alert(aa.indexOf('5'));//查找位置（内容）
                alert(aa.concat("hello"));// 追加
                alert(aa.charAt("2"));//获取某个位置的字符内容
                alert(aa.charCodeAt("2"));//返回在指定的位置的字符的 Unicode 编码。
                alert(aa.startsWith("a"));//以什么开始
                alert(aa.endsWith("d"));//以什么结束
                alert(aa.replace(/asdfgbb/,"hello"));//替换
                var str="How are you doing today?";
                alert(str.split(" "));//	把字符串分割为字符串数组
                alert(str.split(""));
                alert(str.split(" ",3));
            };
            //　array对象及方法
            document.getElementById('btn6').onclick = function () {
                var a = [1,2,3];
                alert(a.length);//返回数组中元素的数目。
                alert(a.concat(4,5));//连接两个或更多的数组，并返回结果。
                var arr = new Array(3);
                arr[0] = "1";
                arr[1] = "2";
                arr[2] = "3";
                arr[3] = "4";
                arr[4] = "5";
                arr[5] = "6";
                alert(arr.join());//把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔
                alert(arr.pop());//删除并返回数组的最后一个元素
                alert(arr.push("G"));//向数组的末尾添加一个或更多元素，并返回新的长度。
                alert(arr);
                alert(arr.reverse());//颠倒数组中元素的顺序。
                alert(arr.shift());//删除并返回数组的第一个元素
                arr.unshift('qq');//向数组的开头添加一个或更多元素，并返回新的长度
                alert(arr);
                alert(arr.slice(1));//从某个已有的数组返回选定的元素
                alert(arr.sort());//对数组的元素进行排序
                arr.splice(1,1,"W");//删除元素，并向数组添加新元素。
                alert(arr);
            };
            document.getElementById('btn7').onclick = function () {
                alert(document.cookie);
            };
        };
            //时间对象
            var myTime = function () {
                var d = new Date();
                //表明生成了一个日期对象
                var
                    year = d.getFullYear();
                var month = d.getMonth();//从0开始
                var date = d.getDate();
                var week = d.getDay();
                var hour = d.getHours();
                var minute = d.getMinutes();
                var second = d.getSeconds();
                var ms = d.getMilliseconds();
                var pv = document.getElementById('p1');
                pv.textContent = '今天是 : 星期' + week + ' ' + year + '年' + (month + 1) + '月' + date + '日' + hour + ':' + minute + ':' + second;


        }
    </script>

</head>
<body>
<br/>
<fieldset>
    <legend>内置对象</legend>
    <p class="f-w">代码说明：</p>
    <p>作为一门编程语言，JavaScript提供了一些内置的对象和函数。内置对象提供编程的几种最常用的功能。JavaScript内置对象有以下几种。
    <ul>
        <li><span class="red">window</span> 对象及方法</li>
        <li><span class="red">document</span> 对象及方法</li>
        <li><span class="red">history</span> 对象及方法</li>
        <li><span class="red">date</span> 日期对象及方法</li>
        <li><span class="red">location</span> 对象及方法</li>
        <li><span class="red">screen</span> 对象及方法</li>
        <li><span class="red">math</span> 对象及方法</li>
        <li><span class="red">string</span> 对象及方法</li>
        <li><span class="red">array</span> 对象及方法</li>
        <li><span class="red">cookie</span> 对象及方法</li>
    </ul>
    <div>　　内置对象都有自己的方法和属性，访问的方法如下：</div>
    <div>　　对象名.属性名称</div>
    <div>　　对象名.方法名称(参数表) </div>
    <br/>
    <hr/>
    <div class="f-w">　window对象</div>
        <span class="red">　　alert</span>（）； 弹出个提示框 (确定)　<button id="_alert">按钮</button> <span class="gary">点击按钮时 弹出提示框 hello!</span><br/>
        <span class="red">　　prompt</span>（）；弹出个输入框　<button id="_prompt">按钮</button> <span class="gary">　点击按钮时 弹出输入框!</span><br/>
        <span class="red">　　confirm</span>（）；弹出个确认框 (确定,取消)　<button id="_confirm">按钮</button> <span class="gary">　点击按钮时 弹出确认框!</span><br/>
        <span class="red">　　open</span>（）；打开一个窗口　<button id="_open">按钮</button> <span class="gary">　点击按钮时 打开另一个页面!</span><br/>
        <span class="red">　　close</span>（）；关闭窗口　<span class="gr">　open打开的页面内有关闭窗口按钮与代码示例</span><br/>
        <span class="red">　　setInterval</span> 定时器<br/>
        <span class="red">　　setTimeout</span> 用于在指定的毫秒数后调用函数或计算表达式。　　　
    <p class="f-w">　代码示例:</p>
    <pre> 　　&lt;script&gt;
        　　window.onload = function () {

      　　　 　 //<span class="red">alert</span> 弹出消息框
                  document.getElementById('_alert').onclick= function () {
                       <span class="gr">alert('hello!')</span>
                   };

                  //<span class="red">prompt</span> 弹出输入框
                  document.getElementById('_prompt').onclick= function () {
                       <span class="gr">prompt('请输入您的姓名！')</span>
                  };

                 //<span class="red">confirm</span> 弹出确认框
                  document.getElementById('_confirm').onclick= function () {
                        <span class="gr">confirm('是这样吗?')</span>
                  };

                //<span class="red">open</span> 打开另一个网页
                 document.getElementById('_open').onclick= function () {
                        <span class="gr">open('kong.html')</span>
                  }
  　　　 }
        &lt;/script&gt;
    </pre>　

    <hr/>
    <div class="f-w">document对象</div>
    <div>

    </div>

    <hr/>
    <div class="f-w">data对象</div>
     　<span class="red">getFullYear</span>:　年<br/>
     　<span class="red">getMonth</span>:　月<br/>
     　<span class="red">getDate</span>:　日<br/>
     　<span class="red">getDay</span>:　星期<br/>
     　<span class="red">getHours</span>:　小时<br/>
     　<span class="red">getMinutes</span>:　分钟<br/>
     　<span class="red">getSeconds</span>:　秒<br/>
     　<span class="red">getSeconds</span>:　毫秒
    <div><br/>
        <div class="f-w">代码效果：</div>
        <p id="p1"style =' font-size:12px;width:220px;height:20px;border: 1px solid gray;'></p>
        <div class="f-w">代码示例：</div>
                <pre>
                var myTime = function() {
                    var d = new <span class="red">Date</span>();//表明生成了一个日期对象
                    var year = d.<span class="red">getFullYear</span>();//表明生成了年
                    var month = d.<span class="red">getMonth</span>();// 月份  从0开始 所以需要+1
                    var date = d.<span class="red">getDate</span>();//日
                    var week = d.<span class="red">getDay</span>();//星期
                    var hour = d.<span class="red">getHours</span>();//小时
                    var minute = d.<span class="red">getMinutes</span>();//分钟
                    var second = d.<span class="red">getSeconds</span>();//秒
                    var ms = d.<span class="red">getMilliseconds</span>();//毫秒
                    var pv = document.getElementById('p1');
                    pv.textContent = '今天是 : 星期' + week + ' ' + year + '年' + (month + 1) + '月' + date + '日' + hour + ':' + minute + ':' + second;
                };
                </pre>
    </div>
    <hr/>
    <div class="f-w">Screen屏幕对象</div><br/>
    　<span class="red">availWidth</span>:　有效的宽度<br/>
    　<span class="red">availHeight</span>:　有效的高度<br/>
    　<span class="red">width</span>:　实际的宽度<br/>
    　<span class="red">height</span>:　实际的高度<br/>
    　<span class="red">colorDepth</span>:　颜色深度<br/>
    <br/>
        <div class="f-w">代码效果：</div>
        <button id="btn3">运行效果</button>
        <div class="f-w">代码示例：</div>
                <pre>
                 document.getElementById('btn3').onclick = function () {
                        alert(screen.<span class="red">availWidth</span>);//有效的宽度
                        alert(screen.<span class="red">availHeight</span>);//有效的高度
                        alert(screen.<span class="red">width</span>);//实际的宽度
                        alert(screen.<span class="red">height</span>);//实际的高度
                        alert(screen.<span class="red">colorDepth</span>);//颜色深度
                    };
                </pre>
            <hr/>
            <div class="f-w">math对象</div>
    　<span class="red">min();</span>:　返回 x 和 y 中的最低值<br/>
    　<span class="red">max();</span>:　返回 x 和 y 中的最高值<br/>
    　<span class="red">random();</span>:　返回 0 ~ 1 之间的随机数<br/>
    　<span class="red">abs();</span>:　返回数的绝对值<br/>
    　<span class="red">floor();</span>:　对数进行下舍入<br/>
    　<span class="red">ceil();</span>:　对数进行上舍入<br/>
            <div>
                <div class="f-w">代码效果</div>
                <button id="btn4">运行效果</button>
                <div class="f-w">代码示例</div>
                <div>
                <pre>
                 document.getElementById('btn4').onclick = function () {
                        alert(Math.<span class="red">min(5,7)</span>);//返回 x 和 y 中的最低值。
                        alert(Math.<span class="red">max(5,7)</span>);//返回 x 和 y 中的最高值。
                        alert(Math.<span class="red">random()</span>);//返回 0 ~ 1 之间的随机数。
                        alert(Math.<span class="red">abs(5)</span>);//返回数的绝对值。
                        alert(Math.<span class="red">floor(4.22)</span>);//对数进行下舍入。
                        alert(Math.<span class="red">ceil(4.22)</span>);//	对数进行上舍入
                    };
                </pre>
                </div>
            <hr/>
            <div class="f-w">string对象</div><br/>
                　<span class="red">substr();</span>:　截取长度  ( 起始位置，长度)<br/>
                　<span class="red">indexOf();</span>:　查找位置（内容<br/>
                　<span class="red">concat();</span>:　追加<br/>
                　<span class="red">charAt();</span>:　获取某个位置的字符内容<br/>
                　<span class="red">charCodeAt();</span>:　返回在指定的位置的字符的 Unicode 编码<br/>
                　<span class="red">startsWith();</span>:　以什么开始<br/>
                　<span class="red">endsWith();</span>:　以什么结束<br/>
                　<span class="red">replace();</span>:　替换<br/>
                　<span class="red">split();</span>:　把字符串分割为字符串数组<br/><br/>

                <div class="f-w">代码效果</div><button id="btn5">运行效果</button>
                <div class="f-w">代码示例</div>
                <div>
                <pre>
                 var aa = 'hkjk65lkj';
                    alert(aa.<span class="red">substr</span>(4,3));//截取长度  ( 起始位置，长度)
                    alert(aa.<span class="red">indexOf</span>('5'));//查找位置（内容）
                    alert(aa.<span class="red">concat</span>("hello"));// 追加
                    alert(aa.<span class="red">charAt</span>("2"));//获取某个位置的字符内容
                    alert(aa.<span class="red">charCodeAt</span>("2"));//返回在指定的位置的字符的 Unicode 编码。
                    alert(aa.<span class="red">startsWith</span>("a"));//以什么开始
                    alert(aa.<span class="red">endsWith</span>("d"));//以什么结束
                    alert(aa.<span class="red">replace</span>(/asdfgbb/,"hello"));//替换
                    var str="How are you doing today?";
                    document.write(str.<span class="red">split</span>(" ")+"&lt;br /&gt;");//把字符串分割为字符串数组
                    document.write(str.<span class="red">split</span>("")+"&lt;br /&gt;");
                    document.write(str.<span class="red">split</span>(" ",3));
                </pre>
                </div>
                <hr/>
                　<div class="f-w">array对象</div><br/>
                　<span class="red">length</span>:　返回数组中元素的数目<br/>
                　<span class="red">concat();</span>:　连接两个或更多的数组，并返回结果<br/>
                　<span class="red">join();</span>:　把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔<br/>
                　<span class="red">pop();</span>:　删除并返回数组的最后一个元素<br/>
                　<span class="red">push();</span>:　向数组的末尾添加一个或更多元素，并返回新的长度<br/>
                　<span class="red">reverse();</span>:　颠倒数组中元素的顺序<br/>
                　<span class="red">shift();</span>:　删除并返回数组的第一个元素<br/>
                　<span class="red">unshift();</span>:　向数组的开头添加一个或更多元素，并返回新的长度<br/>
                　<span class="red">slice();</span>:　从某个已有的数组返回选定的元素<br/>
                　<span class="red">sort();</span>:　对数组的元素进行排序<br/>
                　<span class="red">splice();</span>:　删除元素，并向数组添加新元素<br/>
                <br/>
                    <div class="f-w">代码效果</div>
                <button id="btn6">运行效果</button>
                    <div class="f-w">代码示例</div>
                    <div>
                <pre>
                  var a = [1,2,3];
                    alert(a.<span class="red">length</span>);//返回数组中元素的数目。
                    alert(a.<span class="red">concat</span>(4,5));//连接两个或更多的数组，并返回结果。
                    var arr = new Array(3);
                    arr[0] = "1";
                    arr[1] = "2";
                    arr[2] = "3";
                    arr[3] = "4";
                    arr[4] = "5";
                    arr[5] = "6";
                    alert(arr.<span class="red">join()</span>);//把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔
                    alert(arr.<span class="red">pop()</span>);//删除并返回数组的最后一个元素
                    alert(arr.<span class="red">push("G")</span>);//向数组的末尾添加一个或更多元素，并返回新的长度。
                    alert(arr);
                    alert(arr.<span class="red">reverse()</span>);//颠倒数组中元素的顺序。
                    alert(arr.<span class="red">shift()</span>);//删除并返回数组的第一个元素
                    arr.<span class="red">unshift('qq')</span>;//向数组的开头添加一个或更多元素，并返回新的长度
                    alert(arr);
                    alert(arr.<span class="red">slice(1)</span>);//从某个已有的数组返回选定的元素
                    alert(arr.<span class="red">sort()</span>);//对数组的元素进行排序
                    arr.<span class="red">splice(1,1,"W")</span>;//删除元素，并向数组添加新元素。
                    alert(arr);
                </pre>
                    </div>
                    <hr/>
                    <div>cookie对象</div>
                    <div>
                        <div>代码示例</div>
                        <div>
                <pre>
                     alert(document.cookie);
                </pre>
                        </div>
                        <hr/>
</fieldset>
</body>
</html>